<template>
	<div class="login">
		
		<img src="../../assets/img/img_dl_logo.png" class="img_dl_logo" />
		
		<img src="../../assets/img/img_dl_pic.png" class="img_dl_pic" />
		

		<div class="login-center" >
			<div class="login-header">欢迎登录,今天是{{now}}</div>
			
			<div class="login-form">
			<el-form  :inline="false" :rules="rules" size="medium" ref="form" :model="form"
				:style="{textAlign:'center'}">
				<div class="login_title">用户登录</div>
				<el-row>
					<el-col :span="24">
						<el-form-item label="" prop="userName">
							<el-input placeholder="用户名" prefix-icon="el-icon-user" v-model="form.userName"  ></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="" prop="userPasswd">
							<el-input placeholder="密码" prefix-icon="el-icon-lock" type="password" @keyup.enter.native="handleSubmit" v-model="form.userPasswd">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24" style="text-align: left;">
						<el-form-item label="">
							<el-checkbox v-model="form.remaber">记住密码</el-checkbox>
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="">
							<el-button size="medium" type="primary" style="width: 100%;margin-top: 5px;margin-left: 0;"
								@click="handleSubmit">登录</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			</div>
		</div>

<div class="login-footer">
	版权所有<el-divider direction="vertical" ></el-divider> 安徽省农村信用社联合社
	
</div>


	</div>
</template>

<script>
	//import {getMenusByUserId,login} from '@/api/system.js';
	/* function hasErrors (fieldsError) {
	  return Object.keys(fieldsError).some(field => fieldsError[field]);
	} */
	"use strict";
	import cookie from 'js-cookie'
	export default {
		data() {
			return {
				remaber:false,
				params:{},
				form: {
					userName: '',
					userPasswd: '',
					remaber:false
				},
				now:'',
				// form: this.$form.createForm(this),
				redirect: undefined,
				rules: {
					userName: [{
						required: true,
						message: "请输入用户名",
						trigger: ['blur', 'change']
					}],
					userPasswd: [{
						required: true,
						message: "请输入密码",
						trigger: ['blur', 'change']
					}],
				}
			};
		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect
				},
				immediate: true
			}
		},
		created() {
			let date = new Date();
			this.now = date.getFullYear() +"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"
			//this.params = this.this.$route.params;
			 if (this.$store.getters.getActiveUser() != null) {
				this.$router.push({
					path: this.redirect || '/'
				});
			}else{
				
			let loginUser = cookie.get("loginUser");
			try{
				this.form  = JSON.parse(loginUser);
				this.remaber = true;
			}catch(e){
				//TODO handle the exception
			}
				
			}
		},
		mounted() {
			/* 	this.$nextTick(() => {
					// To disabled submit button at the beginning.
					this.form.validateFields();
				}); */
		},
		methods: {
			
			
			
			
			
			// Only show error after a field is touched.
			userNameError() {
				const {
					getFieldError,
					isFieldTouched
				} = this.form;
				return isFieldTouched('userName') && getFieldError('userName');
			},
			// Only show error after a field is touched.
			passwordError() {
				const {
					getFieldError,
					isFieldTouched
				} = this.form;
				return isFieldTouched('password') && getFieldError('password');
			},
			handleSubmit() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						this.$store.dispatch('Login', {userName:this.form.userName,userPasswd:this.$md5(this.form.userPasswd)}).then(() => {
							
							if(this.form.remaber){

								cookie.set("loginUser",JSON.stringify(this.form))
							}else{
								cookie.set("loginUser","")
							}
							
							
		
							 this.$router.push({
								params:this.params,
								path: this.redirect || '/'
							}) 
						  
						}).catch((error) => {
							this.$message({
						duration:5000,								type: 'error',
								message: error
							});
							/* this.$alert(error,"消息提示",{
								type:'error',
							}) */
						});
					}

				});

				/* 	this.form.validateFields((err, values) => {
						if (!err) {
							console.log('Received values of form: ', values);
							this.$store.dispatch('Login', {
								'login': values.login,
								'passwd': this.$md5(values.passwd)
							}).then(() => {
								this.$router.push({
									path: this.redirect || '/'
								})
							});

						} else {

						}
					}); */
			},
		},
	};
</script>

<style >
	
	.login-footer{
		position: fixed;
		top: 100%;
		text-align: center;
		margin-top: -40px;
		color:rgba(255,255,255,0.9);
		width: 100%;
		letter-spacing: 0.88px;
		font-size:14px;
	}
	
	.login-form .el-button--primary, .login-form .el-button--primary{
		background-color: #fc480b;
		border-color:#fc480b;
		border-radius: 6px;
		letter-spacing: 8px;
		
	}
	.login-form .el-button--primary:focus, .login-form .el-button--primary:hover{
		background-color: #d8410b;
		border-color:#d8410b;
	}
	.login-form .el-input__inner{
		border:1px solid #FFF;
		border-bottom: 1px solid #C3C3C3;
		border-radius: 0px;
	}
	.login-header{
		text-align: right;
		color:rgba(255,255,255,0.7);
		font-size: 12px;
		margin-bottom: 10px;
		margin-right: 10px;
	}
	
	.img_dl_pic{
		position: fixed;
		top: 50%;
		left: 25%;
		margin-left: -40px;
		height:420px;
		margin-top:-170px;
	}
	
	.img_dl_logo{
		position: fixed;
		top: 50%;
		left: 25%;
		margin-left: -40px;
		margin-top: -230px;
		height: 34px;
	}
	
	.login {
		height: 100vh;
		width: 100%;
		background: url('../../assets/img/img_dl_bg.png') no-repeat;
		background-size: 100% 100%;
		border-color: red;
		--overflow: hidden;
	}

	.login-center {
		/* position: fixed;
		top: 50%;
		left: 50%;
		margin-top: -165px;
		margin-left: -300px;
		background: url('../../assets/login/login_bg1.png');
		background-size: cover;
		height: 330px;
		width: 600px;
		box-shadow: 5px 10px 15px 2px rgba(0, 0, 0, 0.4); */
		position: fixed;
		top: 50%;
		left: 75%;
		width: 280px;
		height:280px;
		margin-top: -170px;
		margin-left: -140px;
		
		
		
	}

	.login-form {
		--margin-left: 370px;
		--margin-right: 10px;
		
		border-radius: 6px;
		background-color: #FFF;
		padding:10px 20px;
	}

	.login_title {
		--margin-top: 40px;
		--margin-bottom: 20px;
		font-weight: 500;
		font-size: 22px;
		--font-family: 'apple';
		letter-spacing: 2px;
		color:#666666;
		padding:10px
	}
	
	
	.login-form .el-form-item.is-error .el-input__inner,.login-form .el-form-item.is-error .el-input__inner:focus, .login-form .el-form-item.is-error .el-textarea__inner,.login-form .el-form-item.is-error .el-textarea__inner:focus, .login-form .el-message-box__input input.invalid, .login-form .el-message-box__input input.invalid:focus {
	 border-color: #FFF;
	  border-bottom-color:#F56C6C;
	  }
	  
	  .login-form .el-checkbox__input.is-checked + .el-checkbox__label{
		  color:#fc480b;
	  }
	  
	  .login-form .el-checkbox__input.is-checked .el-checkbox__inner, .login-form .el-checkbox__input.is-indeterminate .el-checkbox__inner {
	    background-color: #fc480b;
	    border-color: #fc480b;
	  }
</style>
